<script lang="ts" setup>
	import { ref } from "vue"
	import { UserOutlined, KeyOutlined, EyeOutlined, EyeInvisibleOutlined } from '@ant-design/icons-vue';
	import { UserApi } from '@/api/user'
	import { message } from 'ant-design-vue';
	import { useUserStore } from '@/stores/user'
	import { usePopupStore } from '@/stores/popup'
	const usePopup = usePopupStore()
	const userStore = useUserStore()
	let userRegister = ref({
		username: '',
		password: '',
		confirmPassword: '',
	})
	const exit = (type : string) => {
		usePopup.setPopup(type)
		userRegister.value = {
			username: '',
			password: '',
			confirmPassword: '',
		}
	}
	let loading = ref(false)
	const submit = () => {
		if (userRegister.value.username.length == 0) {
			message.error('用户名不能为空');
			return false
		}
		if (userRegister.value.password.length < 6) {
			message.error('密码至少为6位');
			return false
		}
		if (userRegister.value.password != userRegister.value.confirmPassword) {
			message.error('两次密码不一致');
			return false
		}
		loading.value = true
		UserApi.register(userRegister.value).then((res : any) => {
			if (res.code == 1) {
				message.success(res.message);
				userStore.setUser(res.data)
				exit('')
			} else if (res.code == 0) {
				message.error(res.message);
			}
		}).finally(() => {
			loading.value = false
		})
	}
	let inputType = ref('password')
	let confirmInputType = ref('password')
	const iconStyle = {
		color: 'rgba(0, 0, 0, 0.45)'
	}
</script>

<template>
	<a-modal :open="true" :footer="null" @cancel="exit('')" centered width="850px"
		:getContainer="false">
		<div class="content">
			<div class="left">
				<img src="../../assets/image/user/register-bg.png" />
			</div>
			<div class="right">
				<div class="title"><span>Hello！</span>注册开始使用</div>
				<div class="text">WELCOME TO THE WEILAI </div>
				<div class="input-box">
					<a-input v-model:value="userRegister.username" placeholder="用户名" class="input">
						<template #prefix>
							<user-outlined :style="iconStyle" />
						</template>
					</a-input>
					<a-input v-model:value="userRegister.password" :type="inputType" placeholder="密码" class="input">
						<template #prefix>
							<key-outlined :style="iconStyle" />
						</template>
						<template #suffix>
							<eye-invisible-outlined :style="iconStyle" @click="inputType = 'text'"
								v-if="inputType == 'password'" />
							<eye-outlined :style="{color:'#1677ff'}" @click="inputType = 'password'" v-else />
						</template>
					</a-input>
					<a-input v-model:value="userRegister.confirmPassword" :type="confirmInputType" placeholder="确认密码"
						class="input">
						<template #prefix>
							<key-outlined :style="iconStyle" />
						</template>
						<template #suffix>
							<eye-invisible-outlined :style="iconStyle" @click="confirmInputType = 'text'"
								v-if="confirmInputType == 'password'" />
							<eye-outlined :style="{color:'#1677ff'}" @click="confirmInputType = 'password'" v-else />
						</template>
					</a-input>
				</div>
				<div class="submit-box">
					<a-button type="primary" class="submit" @click="submit" :loading="loading">
						注&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;册
					</a-button>
				</div>
				<div class="tips">
					已有帐号？<span @mouseup="exit('login')">立即登录</span>
				</div>
			</div>
		</div>
	</a-modal>
</template>

<style lang="scss" scoped>
	:where(.css-dev-only-do-not-override-1hsjdkk).ant-modal .ant-modal-content {
		padding: 0;
	}

	.content {
		display: flex;

		.left {
			img {
				width: 390px;
				height: 500px;
			}
		}

		.right {
			min-width: 450px;
			padding-top: 100px;
			display: flex;
			flex-direction: column;
			align-items: center;

			.title {
				font-size: 24px;
				font-weight: bold;

				span {
					color: #1677ff;
				}
			}

			.text {
				font-size: 16px;
				font-weight: 500;
				color: #d2d2d2;
			}

			.input-box {
				width: 280px;
				margin-top: 20px;

				.input {
					margin-top: 10px;
				}
			}
		}

		.submit-box {
			margin-top: 40px;

			.submit {
				width: 280px;
			}
		}

		.tips {
			margin-top: 60px;

			span {
				color: #1677ff;
				cursor: pointer;
			}
		}
	}
</style>